import { Button } from '@/components/ui/button'
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
} from "@/components/ui/dialog"
import { FileText } from 'lucide-react'
import React from 'react'

interface TemplateSelectionModalProps {
  isOpen: boolean
  onClose: () => void
  onSelectTemplate: (template: string) => void
}

const TemplateSelectionModal: React.FC<TemplateSelectionModalProps> = ({ isOpen, onClose, onSelectTemplate }) => {
  const templates = [
    { name: '空白文档', id: 'blank' },
    { name: '研究报告', id: 'research' },
    { name: '项目计划', id: 'project' },
  ]

  return (
    <Dialog open={isOpen} onOpenChange={onClose}>
      <DialogContent className="sm:max-w-[425px]">
        <DialogHeader>
          <DialogTitle>选择模板</DialogTitle>
          <DialogDescription>
            从以下选项中选择一个模板来开始您的文档。
          </DialogDescription>
        </DialogHeader>
        <div className="grid gap-4 py-4">
          {templates.map((template) => (
            <Button
              key={template.id}
              variant="outline"
              className="justify-start"
              onClick={() => onSelectTemplate(template.id)}
            >
              <FileText className="mr-2 h-4 w-4" />
              {template.name}
            </Button>
          ))}
        </div>
        <DialogFooter>
          <Button onClick={onClose}>取消</Button>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  )
}

export default TemplateSelectionModal